<template>
    <div class="public-common">
        <!--驾驶员信息查询-->
        <div class="public-title">驾驶员列表</div>
        <div style="padding:10px;">
            <el-row>
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="form.test" class="input-with-select"/>
                </el-col>
                <el-col :span="18">
                    <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
                    <el-button type="success" icon="el-icon-view">查看</el-button>
                </el-col>
            </el-row>
        </div><el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
            <el-table-column
            type="selection"
            width="55" fixed="left">
            </el-table-column>
            <el-table-column
                label="姓名">
                <template slot-scope="scope">
                    {{scope.row.carId}}
                </template>
            </el-table-column>                
            <el-table-column
                label="性别">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="是否承包人">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="所属单位">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="照片">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="出生日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="民族">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="籍贯">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="文化程度">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="身份证号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="现住址">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="联系电话">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="驾驶证编号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="准驾车型">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="初次领证日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="驾驶证有效期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="驾照有效年限">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="资格证号">
                <template slot-scope="scope">
                    {{scope.row.companyName}}
                </template>
            </el-table-column>
            <el-table-column
                label="资格证发证日期">
                <template slot-scope="scope">
                    {{scope.row.carId}}
                </template>
            </el-table-column>                
            <el-table-column
                label="服务监督卡类型">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="服务监督卡办理时间">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="学期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="学号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="备案证号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="备案证发证日期">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="档案编号">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="备注">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="使用状态">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="创建人">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间">
                <template slot-scope="scope">
                    {{scope.row.carType}}
                </template>
            </el-table-column>
            <el-table-column
                label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini">查看</el-button>
                </template>
            </el-table-column> 
            
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.now"
        :page-sizes="page.sizes"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" style="margin-top:10px;">
        </el-pagination>
        <!--dialog-->
        <el-dialog  :visible.sync="dialog.isVisible" width="75%" top="8vh">
            <div class="dialog-navtab">
                <div v-for="(name,index) in dialog.navtab.arr" :key="index" :class="index==dialog.navtab.currIndex?'dialog-navactive':''" @click="dialogNav(index)">
                    {{name}}
                </div>
            </div>
            <el-scrollbar style="height:350px;">
            <template v-if="dialog.navtab.currIndex == 0">
                
                    <el-form label-width="120px" disabled>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                               <el-form-item label="驾驶员照片">
                                    <div style="position:absolute;">
                                        <img :src="dialog.picSrc" alt="" style="width:110px;height:146px;float:left">
                                        <div style="margin-left:120px;margin-top:10px;line-height:22px;">建议照片大小为小2寸最佳<br>(长×宽为45mm×35mm)</div>
                                    </div>                            
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="所属单位">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row> 
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>  
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="出生日期">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="民族">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="籍贯">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="文化程度">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="驾驶证编号">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="身份证号">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="准驾车型">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="现住址">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="初次领证日期">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="联系电话">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="驾驶证有效期">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="学 期">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="驾驶证有效年限">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="学号">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="资格证号">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="备案证号">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="资格证发证日期">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="备案证发证日期">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="档案编号">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="是否承包人">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="备注">
                                    <div style="position:absolute;width:100%">
                                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="dialog.name" ></el-input>                            
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="创建时间">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="创建人">
                                    <el-input v-model="dialog.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                                                 
                    </el-form>
                </template>
                <template v-else-if="dialog.navtab.currIndex == 1">
                    
                    <el-table :data="dialog.tabledata1" size="mini" border stripe header-row-class-name="textcenter" max-height="370px">
                        <el-table-column
                            label="姓名">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="关系">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="工作单位或住址" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column>             
                        
                    </el-table>
                </template>
                <template v-else-if="dialog.navtab.currIndex == 2">
                    <el-table :data="dialog.tabledata2" size="mini" border stripe header-row-class-name="textcenter" max-height="370px">
                        <el-table-column
                            label="公司名称">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="工作年限">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="备注" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column>             
                        
                    </el-table>
                </template>
                <template v-else-if="dialog.navtab.currIndex == 3">
                    <el-table :data="dialog.tabledata3" size="mini" border stripe header-row-class-name="textcenter" height="300">
                        <el-table-column
                            label="车牌号" fixed="left">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="驾驶员">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="违规类别" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="实际扣分">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="发生时间">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="发生地点" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="稽查科转办日期">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="处理结果">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="违规状态" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="经办人">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="处理人">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="dialog.page3.now"
                    :page-sizes="dialog.page3.sizes"
                    :page-size="dialog.page3.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dialog.page3.total" style="margin-top:10px;">
                    </el-pagination>
                </template>
                <template v-else-if="dialog.navtab.currIndex == 4">
                    <el-table :data="dialog.tabledata4" size="mini" border stripe header-row-class-name="textcenter" height="300">
                        <el-table-column
                            label="车牌号" fixed="left">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="驾驶员">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="记录日期" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="投诉处理状态">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="投诉方式">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="投诉人" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="联系电话">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="乘车点">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="投诉项目" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="投诉内容">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="投诉时间">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="转办日期">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="调查经过" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="单位意见">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="管理处结果">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="结案时间" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="乘客满意度">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="受理时间">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="投诉经办人" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="投诉调查人">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="投诉处理人">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="dialog.page4.now"
                    :page-sizes="dialog.page4.sizes"
                    :page-size="dialog.page4.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dialog.page4.total" style="margin-top:10px;">
                    </el-pagination>
                </template>
                <template v-else>
                    <el-table :data="dialog.tabledata5" size="mini" border stripe header-row-class-name="textcenter" height="300">
                        <el-table-column
                            label="车牌号" fixed="left">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="驾驶员">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="登记时间" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="发生时间">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="好事类型">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="简要事迹" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="结果">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="受益人">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="受益人电话" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                        <el-table-column
                            label="是否有附件">
                            <template slot-scope="scope">
                                {{scope.row.carId}}
                            </template>
                        </el-table-column>                
                        <el-table-column
                            label="拾金不昧的类型">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="拾金不昧的数量">
                            <template slot-scope="scope">
                                {{scope.row.carType}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="是否媒体报道" >
                            <template slot-scope="scope">
                                {{scope.row.companyName}}
                            </template>
                        </el-table-column> 
                    </el-table>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="dialog.page5.now"
                    :page-sizes="dialog.page5.sizes"
                    :page-size="dialog.page5.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dialog.page5.total" style="margin-top:10px;">
                    </el-pagination>
                </template>
            </el-scrollbar>
            <div class="textcenter">
                <!-- <el-button type="primary">确定</el-button>   -->
                <el-button type="info" @click="dialog.isVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
            form:{
                changevalue:"全部",
                test:'',
                carid:''
            },
            tabledata:[
                {carId:1}
            ],
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            detaildata:[],
            dialog:{
                isVisible:false,
                navtab:{
                    arr:['驾驶员基本信息','家庭主要成员','本人工作经历','驾驶员违规信息','驾驶员投诉信息','驾驶员好人好事信息'],
                    currIndex:0
                },
                picSrc:'',
                name:'',

                tabledata1:[],
                tabledata2:[],
                tabledata3:[],
                tabledata4:[],
                tabledata5:[],
                page1:{
                    now:1,
                    pagesize:10,
                    sizes:[2,10, 20, 50, 100],
                    total:0,
                    key:''
                },
                page2:{
                    now:1,
                    pagesize:10,
                    sizes:[2,10, 20, 50, 100],
                    total:0,
                    key:''
                },
                page3:{
                    now:1,
                    pagesize:10,
                    sizes:[2,10, 20, 50, 100],
                    total:0,
                    key:''
                },
                page4:{
                    now:1,
                    pagesize:10,
                    sizes:[2,10, 20, 50, 100],
                    total:0,
                    key:''
                },
                page5:{
                    now:1,
                    pagesize:10,
                    sizes:[2,10, 20, 50, 100],
                    total:0,
                    key:''
                }
            }
        }
    },
    mounted(){
        
    },
    methods:{
        dialogNav(index){
            this.dialog.navtab.currIndex = index;
        },
        uploadImg(file, fileList){
            let reader = new FileReader();
            reader.onload = ()=>{
                let base64 = reader.result;
                let _base64 = base64.split(',');
                this.dialog.picSrc = 'data:image/jpeg;base64,'+_base64[1];
            }
            reader.readAsDataURL(file.raw);
        },
        addNewdata(type){
            this.dialog.dialog.type = type ;
            this.dialog.dialog.isVisible = true;
        },
        search(){
            alert("search")
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        }

    }
}
</script>
<style lang="scss">
// .el-table th>.cell{height: 23px;width: 200%}
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.public-common{
    padding: 20px;
    .public-title{line-height: 30px;background-color: #deecfd;padding:0 10px;color:$Color; }
}
.dialog-navtab{height:30px;border-bottom:  2px solid $BorderColor;margin-bottom:20px;
    &>div{
        float: left;
        padding: 0 10px;background-color: #deecfd;border-top-left-radius: 3px;border-top-right-radius: 3px;border: 1px solid $BorderColor;margin-right:5px;line-height:29px;border-bottom:none;cursor: pointer;
        &.dialog-navactive{color:$Color;font-weight: bold;background-color:#fff;}
    }
}
</style>